<template>
    <n-image :object-fit="objectFit" :fallback-src="fallback" v-bind="$attrs">
        <template #placeholder>
            <img
                src="/static/images/common/加载.svg"
                class="v-image-loading"
                :width="$attrs.width"
                :height="$attrs.height || $attrs.width"
            />
        </template>
    </n-image>
</template>
<script setup>
const props = defineProps({
    objectFit: {
        type: String,
        default: () => "cover",
    },
    fallback: {
        type: String,
        default: () => "/static/images/common/noPic.png",
    },
});
</script>
<style lang="less" scoped>
:deep(.n-image) {
    img {
        &[data-error="true"] {
            background: var(--image-error-bg-color);
        }
    }
}
.v-image-loading {
    animation: loadingAnimate 1.5s infinite ease-in-out;
}
@keyframes loadingAnimate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>
